<script setup lang="ts">
import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader'
import * as cornerstone from '@cornerstonejs/core'
import { ref } from 'vue'

import MprView from '@/components/MprView.vue'

const {
  imageLoader,
} = cornerstone

const selectRef = ref(null)
const imageIdsRef = ref([])


async function handleFileSelect(evt) {
  const files = evt.target.files
  let ids = []
  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    const imageId = cornerstoneDICOMImageLoader!.wadouri.fileManager.add(file)
    await imageLoader.loadAndCacheImage(imageId)
    ids.push(imageId)
  }

  imageIdsRef.value = ids
}


const prefix = 'mpr-viewer-local'
const ids = {
  toolsGroupId: prefix,
  viewportId1: `${prefix}-viewportId1`,
  viewportId2: `${prefix}-viewportId2`,
  viewportId3: `${prefix}-viewportId3`,
  volumeId:`${prefix}-volumeId`,
  renderingEngineId: `${prefix}-renderEngine`,
}

</script>
<template>
  <input type="file" ref="selectRef" multiple accept=".dcm" @change="handleFileSelect">
  <mpr-view :imageIds="imageIdsRef" :ids="ids" />
</template>

<style scoped>
.lt {
  @apply col-span-1 row-span-1 row-start-1 border-4 relative
}

.lb {
  @apply col-span-1 row-span-1 row-start-2 border-4  relative
}

.rt {
  @apply row-span-2 row-start-1 border-4  relative
}
</style>
